import { memo } from 'react';
import type { ReactNode, FC } from 'react';

import { useAppSelector, shallowEqualApp } from '@/store/hooks';
import CommonHeader from '@/components/common-header';
import SongsItemV2 from '@/components/songs-item-v2';
import { HotRecommendsWappers } from './style';
interface IProps {
  children?: ReactNode;
}

const HotRecommends: FC<IProps> = (props) => {
  const { hotRecommends } = useAppSelector(
    (state) => ({
      hotRecommends: state.recommended.HotRecommends,
    }),
    shallowEqualApp
  );
  return (
    <HotRecommendsWappers>
      <CommonHeader
        icon="sprite_02"
        iconShow={true}
        name="热门推荐"
        moreLink="/discover/songs"
        keywords={['华语', '流行', '摇滚', '民谣', '电子']}
      />
      <div className="recommend-list">
        {hotRecommends.map((item) => {
          return <SongsItemV2 item={item} key={item.id}></SongsItemV2>;
        })}
      </div>
    </HotRecommendsWappers>
  );
};

export default memo(HotRecommends);
